<template>
  <div class="article-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :success-duration="1500"
      :success-text="refreshSuccessText">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :error.sync="error"
        error-text="请求失败，点击重新加载">
        <!-- <van-cell v-for="(item,i) in list" :key="i" :title="item.title" /> -->
        <articleItem v-for='(item,i) in list' :key='i' :article='item' />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script scoped>
import { getArticles } from '@/api/article.js'
import articleItem from '../../../components/article-item.vue'
export default {
  // 组件名称
  name: 'articleList',
  // 组件参数 接收来自父组件的数据
  props: {
    channelId: {
      type: Number,
      required: true
    }
  },
  // 局部注册的组件
  components: { articleItem },
  // 组件状态值
  data () {
    return {
      list: [], // 存储列表数据的数组
      loading: false, // 控制加载中loading
      finished: false, // 控制数据加载结束
      timestamp: null, // 时间戳
      error: false, // 是否加载失败
      refreshing: false, // 下拉刷新后提示状态
      refreshSuccessText: ''// 下拉刷新后提示文本
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 下拉刷新处理函数
    async onRefresh () {
      try {
        // 下拉刷新发起请求，用最新的时间戳，添加到数组最前
        const { data } = await getArticles({
          channel_id: this.channelId, // 频道id
          with_top: 1, // 是否置顶
          timestamp: +new Date() // 请求最新页码值，时间戳
        })
        const { results } = data.data
        this.list.unshift(...results)
        this.refreshing = true
        this.refreshSuccessText = `刷新成功了，有${results.length}条数据`
        // 关闭下拉状态
        this.refreshing = false
      } catch (err) {
        this.refreshing = true
        this.refreshSuccessText = '让我摸摸你的牛至！'
        // 关闭下拉状态
        this.refreshing = false
      }
    },
    // 加载更多处理函数
    async onLoad () {
      try {
        // 发送请求
        const { data } = await getArticles({
          channel_id: this.channelId, // 频道id
          with_top: 1, // 是否置顶
          timestamp: this.timestamp || +new Date() // 请求下一页页码值，时间戳
        })
        const { results } = data.data
        console.log(data)
        // 不能直接push results，直接push是把results传进去了，应该吧results展开
        this.list.push(...results)
        this.loading = false
        // 判断有没有下一页数据
        if (results.length) {
          this.timestamp = data.data.pre_timestamp
        } else {
          this.finished = true
        }
      } catch (err) {
        this.loading = false
        this.error = true
      }
    }
  },
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    this.onLoad()
  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted () {
  }
}
</script>

<style scoped lang='less'>
.artcile-list {
  height: 79vh;
  overflow: auto;
}
</style>
